<template>
  <CommonNav title="句子本">
    <template v-slot:search>
      <label class="input input-sm">
        <svg class="h-[1.5em] opacity-50" viewBox="0 0 24 24">
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="2.5"
            fill="none"
            stroke="currentColor"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </g>
        </svg>
        <input
          type="search"
          class="grow text-sm"
          placeholder="搜索句子本,输入关键字"
          v-model="searchKeyword"
          @input="debouncedSearch"
          ref="searchInput"
        />
        <kbd class="kbd kbd-sm">⌘</kbd>
        <kbd class="kbd kbd-sm">K</kbd>
      </label>
    </template>
  </CommonNav>
  <commonMain>
    <div
      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 md:gap-5 mt-10"
      v-if="course?.length > 0"
    >
      <div
        v-for="(item, index) in course"
        :key="index"
        class="card bg-base-100 shadow-xl"
      >
        <nuxt-link :to="`/sentence/${item.id}`" class="h-full">
          <coursePack :item="item">
            <!-- <div class="mt-1 text-gray-400 text-xs">
                    {{ item.wordNum }}词
                  </div> -->
          </coursePack>
        </nuxt-link>
      </div>
    </div>
    <CommonLack v-show="!course" />
  </commonMain>
</template>
<script setup>
definePageMeta({
  ssr: true,
});
import { ref } from "vue";
import { getSentence } from "~/composables/course/course";
const course = ref([]);
course.value = await getSentence();
</script>
